<template>
  <!-- 实时用电数据 -->
  <div class="w1 h1 right-tab-container">
    <Tabs @on-click="handelChange" v-model="currentName">
      <TabPane label="负荷" name="first">
        <Load v-if="currentName==='first'"></Load>
      </TabPane>
      <TabPane label="电量" name="second">
        <Power v-if="currentName==='second'"></Power>
      </TabPane>
      <TabPane label="电压" name="third">
        <Voltage v-if="currentName==='third'"></Voltage>
      </TabPane>
      <TabPane label="电流" name="forth">
        <Current v-if="currentName==='forth'"></Current>
      </TabPane>
      <TabPane label="功率因数" name="fifth">
        <PowerFactor v-if="currentName==='fifth'"></PowerFactor>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import Load from "./Load"
import Power from "./Power"
import Voltage from "./Voltage"
import Current from "./Current"
import PowerFactor from "./PowerFactor"
export default {
  created() {
    const result = sessionStorage.getItem("ontimelayout")
    if (result) {
      this.currentName = result
    }
  },
  components: { Load, Power, Voltage, Current, PowerFactor },
  data: () => ({
    currentName: "first"
  }),
  methods: {
    handelChange(name) {
      sessionStorage.setItem("ontimelayout", name)
      this.currentName = name
    }
  }
}
</script>
